<template>
	<view class="myBox">
		<view class="bg">
			<view class="Login" v-if="isLog">
				<view class="autar">
					<u--image :src="'http://172.21.63.114:10001'+userInfo.avatar"
					width="130rpx"
					height="130rpx"
					 shape="circle"></u--image>
				</view>
				<u--text color="#ffffff" align="center" :suffixIcon="userInfo.sex=='0' ? 'man' : 'woman'"
				 iconStyle="font-size: 19px;color:#4cfffa"
				 :text="userInfo.nickName"></u--text>
			</view>
			<view class="notLog" @click="toLogin" v-else>
				<view class="autar">
					<u--image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.bbEC4zuJyYZq2FwlY1w1kAHaHa?rs=1&pid=ImgDetMain"
					width="130rpx"
					height="130rpx"
					 shape="circle"></u--image>
				</view>
				<p>点击登录</p>
			</view>
		</view>
		<view class="myOrder">
			<div class="orderItem">
				<navigator url="/pages/myOrders/myOrders" animation-type="slide-in-right">
					<u--text prefixIcon="order"  iconStyle="font-size: 19px" text="我的订单"></u--text>
					<span class="uicon"><u-icon name="arrow-right" size="large"></u-icon></span>
				</navigator>
			</div>
			<div class="orderItem" @click="handleEdit">
				<u--text prefixIcon="account" iconStyle="font-size: 19px" text="修改信息"></u--text>
				<span class="uicon"><u-icon name="arrow-right" size="large"></u-icon></span>
			</div>
			<div class="orderItem" @click="editPasword=true">
				<u--text prefixIcon="lock" iconStyle="font-size: 19px" text="修改密码"></u--text>
				<span class="uicon"><u-icon name="arrow-right" size="large"></u-icon></span>
			</div>
			<div class="orderItem">
				<u--text prefixIcon="question-circle" iconStyle="font-size: 19px" text="联系我们"></u--text>
				<span class="uicon"><u-icon name="arrow-right" size="large"></u-icon></span>
			</div>
			<div class="orderItem1" v-if="isLog">
				<u-modal :show="show" :title="title" :content='content' @confirm="logout" showCancelButton @cancel="show=false"></u-modal>
				<u-button text="退出登录" type="error" @click="show=true"></u-button>
			</div>
		</view>
		<u-modal :show="editInfo" title="修改个人信息" style="display: flex;flex-direction: column;" showCancelButton
			@cancel="()=>editInfo=false" @confirm="editInfoForm">
			<u--form labelPosition="left" :model="infoForm" ref="uForm">
				<u-form-item label="头像" borderBottom ref="item1">
					<u--image :src="userInfo.avatar"
					width="130rpx"
					height="130rpx"
					 shape="circle" @click="imgChoos"></u--image>
				</u-form-item>
				<u-form-item label="昵称" borderBottom ref="item1">
					<u--input v-model="infoForm.nickName" border="none"></u--input>
				</u-form-item>
				<u-form-item label="电话号码" borderBottom ref="item1">
					<u--input v-model="infoForm.phonenumber" border="none"></u--input>
				</u-form-item>
				<u-form-item label="性别"  borderBottom ref="item1">
					<u--input  @focus="showSex = true;" v-model="infoForm.sex" disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false"
				@select="sexSelect">
			</u-action-sheet>
			
		</u-modal>
		<!-- 修改密码 -->
		<u-modal :show="editPasword" title="修改密码" style="display: flex;flex-direction: column;" showCancelButton
			@cancel="()=>editPasword=false" @confirm="editPaswordForm">
			<u--form labelPosition="left" :model="handlePas" ref="uForm">
				<u-form-item label="旧密码" borderBottom ref="item1">
					<u--input v-model="handlePas.oldPassword" border="none" placeholder="旧密码"></u--input>
				</u-form-item>
				<u-form-item label="新密码" borderBottom ref="item1">
					<u--input v-model="handlePas.newPasswor" border="none" placeholder="新密码"></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLog:false,
				userInfo:{
					avatar:''
				},
				show:false,
				title:'警告',
				content:'你确定要退出登录吗？',
				editInfo:false,
				infoForm:{
					avatar:'',	
					nickName:'',
					phonenumber:'',
					sex:'男',
				},
				showSex:false,
				actions: [{
						name: '男',
						index:'0'
					},
					{
						name: '女',
						index:'1'
					},
				],
				editPasword:false,
				handlePas:{
					newPassword:'',
					oldPassword:''
					
				},
				imageValue:''
			};
		},
		onLoad() {
			this.hasLogin()
			this.getUserInfo()
		},
		methods:{
			hasLogin(){
				this.isLog=uni.getStorageSync("token") ? true : false
				// console.log(uni.getStorageSync("token"));
			},
			toLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			getUserInfo(){
				this.$request({
					url:'/prod-api/api/common/user/getInfo',
					method:'GET',
					
				}).then(res=>{
					console.log(res);
					this.userInfo=res.data.user
				})
				.catch(err=>{
					console.log(err);
				})
				
			},
			logout(){
				
				uni.removeStorageSync('token')
				this.hasLogin()
			},
			myOrders(){
				uni.navigateTo({
					url:'/pages/myOrders/myOrders'
				})
			},
			handleEdit(){
				
				this.editInfo=true
			},
			sexSelect(e) {
				this.infoForm.sex = e.name
				
			},
			imgChoos(){
				let _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://172.21.63.114:10001/prod-api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header:{
							    'Authorization':uni.getStorageSync('token'),
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								_this.infoForm.avatar=JSON.parse(uploadFileRes.data).fileName
								console.log(_this.infoForm);
							}
						});
					}
				});
			},
			editInfoForm(){
				this.$request({	
					url:'/prod-api/api/common/user',
					method:'PUT',
					data:{
						...this.infoForm,
						sex:this.infoForm=='男' ? '0' : '1'
					}
				}).then(res=>{
					if(res.data.code=="200"){
						console.log(res);
						uni.$u.toast("信息修改成功")
						this.getUserInfo()
						this.editInfo=false
					}else{
						uni.$u.toast(res.data.msg)
					}
				}).catch(err=>{
					
				})
				console.log(this.infoForm);
			},
			editPaswordForm(){
				this.editPasword=true
				this.$request({
					url:"/prod-api/api/common/user/resetPwd",
					method:'PUT',
					data:this.handlePas
					
				}).then(res=>{
					if(res.data.code=="200"){
						console.log('密码修改成功',res);
						uni.$u.toast('密码修改成功')
						this.editPasword=false
					}else{
						uni.$u.toast(res.data.msg)
					}
					
				}).catch(err=>{
					console.log('错误',err);
				})
			}
		}
	}
</script>

<style lang="scss">
.myBox{
	background-color: #dddddd;
	.bg{
		background-image: url('https://bpic.588ku.com/back_list_pic/21/05/26/ac3c2a1d0e1dbac2fc8c62e03cbbf56f.jpg!/fw/720/quality/90/unsharp/true/compress/true');
		// background-size: 100% 100%;
		background-size: cover;
		filter: grayscale(20%);
		width: 750rpx;
		height: 300rpx;
		position: relative;
		.notLog{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			
			.autar{
				border: 4rpx solid #c7c7c7;
				border-radius: 50%;
			}
			/deep/.nickName{
				color: #ffffff;
				font-weight: bold;
				text-align: center;
				padding-top: 10rpx;
			}
		}
		.Login{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			p{
				color: #ffffff;
				font-weight: bold;
				text-align: center;
				padding-top: 10rpx;
			}
		}
	}
	.myOrder{
		// position: relative;
		.orderItem{
			height: 80rpx;
			line-height: 80rpx;
			background-color: white;
			padding-left: 40rpx;
			margin-bottom: 5rpx;
			position: relative;
			.uicon{
				position: absolute;
				z-index: 1000;
				right:30rpx ;
				top: 0rpx;
				
			}
		}
		.orderItem1{
			height: 80rpx;
			width: 100%;
			line-height: 80rpx;
			background-color: white;
			position: absolute;
			bottom: 40rpx;
			margin-bottom: 5rpx;
		}
	}
}
</style>
